<template>
  <div class="home">
    <Header></Header>
    <div class="container">
      <ContentLeft></ContentLeft>
      <div class="content-center">
        <div class="center-nav">
          <a href="#" class="nav-home">
            <div class="home-btn">
              <span class="iconfont icon-home"></span>
              首页
            </div>
          </a>
          <span class="nav-line"></span>
          <div class="nav-item">
            <ul>
              <li>的生活</li>
              <li>本站相关</li>
              <li>编程小记</li>
              <li>科学技术</li>
              <li>的生活</li>
              <li>本站相关</li>
              <li>编程小记</li>
              <li>...</li>
            </ul>
          </div>
        </div>
        <div class="center-main">
          <ul class="main-wapper">
            <li v-for="(item, index) in showData" :key="index">
              <router-link :to="{ name: 'look' }" class="main-card">
                <div class="card-img"></div>
                <div class="card-center">
                  <h2>{{ item.title }}</h2>
                  <div class="card-wapper">
                    <p>
                      {{ item.brief }}
                    </p>
                    <span class="card-line"></span>
                    <div class="card-icon">
                      <span class="iconfont icon-shijian">1515555</span>
                      <span class="iconfont icon-xiaoxi">55</span>
                      <span class="iconfont icon-yanjing">55</span>
                      <span class="iconfont icon-bad">55</span>
                    </div>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
          <ul class="main-page">
            <li @click="cuPage(true)">&lt;</li>
            <!-- <li v-for="i in totalPage">{{i}}</li> -->
            <li>{{ this.pageNum + 1 }}</li>
            <li @click="cuPage(false)">&gt;</li>
          </ul>
        </div>
      </div>
      <ContentRight></ContentRight>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/Header";
import ContentLeft from "../components/Content-left";
import ContentRight from "../components/Content-right";
import Footer from "../components/Footer";
export default {
  mounted() {
    this.toPage();
  },
  data() {
    return {
      blogData: [
        {
          title: "标题一",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
        {
          title: "标题2",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
        {
          title: "标题3",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
        {
          title: "标题4",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
        {
          title: "标题5",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
        {
          title: "标题6",
          brief:
            "这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这是一段简单的介绍呀这",
          content: "其实也没有什么东西",
        },
      ],
      //分页
      totalPage: "", //总页数
      pageSize: 2, //每页条数
      // currentPage: "",
      showData: "", //当前页显示数据
      pageNum: 0, //当前页数
    };
  },
  methods: {
    //计算总页数,总数据拆分条数
    toPage() {
      this.totalPage = Math.ceil(this.blogData.length / this.pageSize);
      this.showData = this.blogData.slice(
        this.pageSize * this.pageNum,
        this.pageSize * (this.pageNum + 1)
      );
    },
    //改变页码
    cuPage(e) {
      if (e) {
        this.pageNum > 0 ? this.pageNum-- : "";
        this.toPage();
      } else {
        this.pageNum + 1 < this.totalPage ? this.pageNum++ : "";
        this.toPage();
      }
    },
  },
  components: {
    Header,
    ContentLeft,
    ContentRight,
    Footer,
  },
};
</script>
<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
}
.home::before {
  content: " ";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../assets/img/bg_of_user0_at_1615722062134.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.container {
  height: 100%;
  display: flex;
  justify-content: center;

  .content-center {
    width: 50vw;
    min-width: 500px;
    height: 100%;
    padding: 0 10px;
    .center-nav {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12px;
      padding: 10px 20px;
      display: flex;
      justify-content: end;
      align-items: center;
      .nav-home {
        flex-shrink: 0; //防止挤压
        display: flex;
        justify-content: center;
        text-decoration: none;
        .home-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          color: rgb(211, 211, 211);
          span {
            font-size: 40px;
            color: rgb(255, 117, 144);
          }
        }
      }
      .nav-line {
        flex-shrink: 0; //防止挤压
        width: 2px;
        height: 80%;
        display: block;
        background-color: rgb(152, 189, 224);
        transform: translateX(12px);
      }
      .nav-item {
        height: 100%;
        transform: translateX(24px);
        ul {
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          li {
            margin-right: 20px;
            height: 34px;
            // width: 100px;
            line-height: 34px;
            list-style: none;
            font-size: 20px;
            color: rgb(87, 136, 182);
            cursor: pointer;
          }
          li:hover {
            color: skyblue;
          }
        }
      }
    }
    .center-main {
      width: 100%;
      .main-wapper {
        li {
          list-style: none;
          overflow: hidden;
          border-radius: 10px;
          margin-top: 20px;
          .main-card {
            display: block;
            height: 300px;
            position: relative;
            .card-img {
              height: 100%;
              width: 100%;
              background-image: url("../assets/img/wallhaven-0p8q6j_1680x1050.png");
              background-size: 100% auto;
              background-position: center;
              background-repeat: no-repeat;
              transition: all 0.3s ease;
            }
            .card-center {
              height: 100%;
              width: 100%;
              position: absolute;
              top: 0%;
              left: 0%;
              cursor: pointer;
              color: #fff;
              box-sizing: border-box;
              padding: 15% 2% 2%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              h2 {
                transition: all 0.3s ease;
                text-align: center;
                font-size: 34px;
              }
              .card-wapper {
                transition: all 0.3s ease;
                transform: translateY(-20%);
                opacity: 0;
                p {
                  height: 70px;
                  display: flex;
                  align-items: center;
                }
                .card-line {
                  display: block;
                  height: 2px;
                  width: 100%;
                  background-color: rgba(255, 255, 255, 0.5);
                }
                .card-icon {
                  span {
                    padding-right: 10px;
                  }
                }
              }
            }
          }
          .main-card:hover .card-img {
            background-size: 110% auto;
            filter: blur(4px);
          }
          .main-card:hover .card-center {
            h2 {
              transform: translateY(-40%) scale(1.2);
            }
            .card-wapper {
              transform: translateY(0%);
              opacity: 1;
            }
          }
        }
      }
      .main-page {
        width: 100%;
        height: 8vh;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          list-style: none;
          width: 40px;
          height: 30px;
          color: #fff;
          border: 1px solid rgb(255, 255, 255);
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>